<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原理分析</title>
</head>

<body>
    <script type="text/javascript">
        //目标对象
        const user = {
                name: '鸣人',
                age: 20,
                wife: {
                    name: '雏田',
                    age: 16
                }
            }
            //参数1 user target目标对象
            //参数  handler  ---》处理器对象  用来监视数据 及数据的操作

        const proxyUser = new Proxy(user, {
            get(target, prop) {
                console.log('get方法调用了');
                return Reflect.get(target, prop) //要有这一部分反射对象才能实现代理对象获取目标对象中的属性值
            },
            //set方法 不仅仅是修改目标对象的属性值 还可以增加目标对象的新的属性
            set(target, prop, val) {
                console.log('set方法调用了');
                return Reflect.set(target, prop, val)
            },
            deleteProperty(target, prop) {
                console.log('delete方法调用了');
                return Reflect.deleteProperty(target, prop)
            }
        })

        //通过代理对象获取目标对象中的某个属性值
        console.log(proxyUser.name);
        //通过代理对象更新目标对象上的某个属性值
        proxyUser.name = 'dageda'
        console.log(user);
        //通过代理对象向目标对象添加一个新的属性
        proxyUser.gender = 'nan'
        proxyUser.name1 = '旋涡鸣人'
        console.log(user);
        delete proxyUser.name
        console.log(user);

        //更新目标对象中的某个属性对象中的属性值
        proxyUser.wife.name = '日向雏田'
        console.log(user);
    </script>

</body>

</html>